<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-02 15:21:59
 * @LastEditTime: 2023-07-08 16:21:05
 * @FilePath: \myblog\src\components\card\CardAricleList.vue
-->
<template>
  <article class="blog-content--item">
      <h3 class="blog-item--title">{{article.title}}</h3>
      <p class="blog-item--date">
        {{article.date}}
      </p>
      <p class="blog-item--author">{{nikname}}</p>
      <img class="blog-item--illu" :src="article.cover" alt="!">
      <div class="blog-item--desc">
        <el-tag class="blog-item--column" size-="medium">{{article.column.name}}</el-tag>
        <div class="blog-item-content" v-html="article.content">
        </div>
      </div>
      <p class="blog-item--tags">
      <span class="blog-tags--hit">浏览 ({{article.hit_num}})</span>
      <span class="blog-tags--like">点赞 ({{article.like_num}})</span>
      <span class="blog-tags--comment">评论 ({{article.comment_num}})</span>
      </p>
  </article>
</template>

<script>
export default {
  components:{},
  data(){
    return {
    }
  },
  props: {
    article: {
      type: Object
    },
  },
created(){
},
mounted(){},
watch:{},
computed:{
  nikname() {
    return this.article?.author?.nikname || 'doggel'
  },
},
methods:{},
}
</script>
<style lang="scss" scoped>
  .blog-content--item {
    padding: 0 20px;
    text-align: center;
    .blog-item--title {
      font-size: 20px;
      font-weight: normal;
      margin-bottom: 20px;
    }
    .blog-item--date {
      margin-bottom: 20px;
    }
    .blog-item--author {
      margin-bottom: 20px;
    }
    .blog-item--illu {
      width: 45%;
      margin-bottom: 20px;
    }
    .blog-item--desc {
      margin-bottom: 20px;
      text-align: right;
      .blog-item--column {
        margin-bottom: 10px;
      }
      .blog-item-content {
        text-align: left;
        text-indent: 2em;
      }
    }
    .blog-item--tags {
      text-align: right;
      span {
        margin-right: 10px;
      }
    }
  }
</style>